<script setup lang="ts">
import { defineProps, ref, toRef } from 'vue'
import draggable from 'vuedraggable'
import svgIcon from './icons/svgIcon.vue'
import type { PropType } from 'vue'
interface ComponentGroup {
    type: string
    label: string
}
const props = defineProps({
    fields: {
        type: Array as PropType<string[]>,
        required: true
    },
    list: {
        type: Array as PropType<ComponentGroup[]>,
        required: true
    }
})

// 在 script setup 中，props 可以直接使用，不需要 ref 包装
// 如果需要响应式引用，可以使用 toRef 或 computed
const list = toRef(props, 'list')
const fields = toRef(props, 'fields')

</script>

<template>
    <div class="widget-group">
        <!-- <div v-for="item in localList"> -->
        <draggable item-key="type" ghostClass="ghost" :group="{ name: 'widget', pull: 'clone', put: false }"
            :sort="false" :list="list" class="widget-container">
            <template #item="{ element }">
                <div class="widget-item">
                    <svgIcon :iconClass="element.type" />
                    <span>{{ element.label }}</span>
                </div>

            </template>


        </draggable>
        <!-- </div> -->
    </div>
</template>

<style scoped lang="less">
.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}
.widget-container {
    display: flex;
    flex-wrap: wrap;

    .widget-item {
        width: 40%;
        font-size: 12px;
        padding: 5px;
        cursor: move;
        transition: all 0.3s;
        margin: 5px 5px;
        background: rgb(244, 246, 252);
        display: block;

        span {
            margin-left: 5px;
        }
    }

    .ghost {
        opacity: 0.5;
        background: rgb(244, 246, 252);
        border: 1px dashed rgb(0, 0, 0);
        box-shadow: 0 0 5px rgb(0, 0, 0);
        transition: all 0.3s;
        cursor: grabbing;
    }
}
</style>